<template>
  <userechart ref="chart_line_one" :options="options" />
</template>

<script>
import userechart from '@/components/echartreport/index.vue'
export default {
  props: ['fromdata', 'controldata', 'charttype', 'isdetail'],
  data() {
    return {
      options: {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      }
    }
  },
  mounted() {
    this.initdata(this.charttype)
    console.log(this.options)
    this.$refs.chart_line_one.initChart()
  },
  methods: {
    initseries(type) {
      if (type === 'line' || type === 'bar') {
        this.options = {
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            data: this.chartlabel
          },
          yAxis: {
            type: 'value'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          series: [
            {
              name: this.controldata.title,
              data: this.chartdata,
              type,
              smooth: true,
              areaStyle: {},
              emphasis: {
                focus: 'series'
              }
            }
          ]
        }
        if (type === 'line') {
          delete this.options.series[0].smooth
          delete this.options.series[0].areaStyle
          delete this.options.series[0].emphasis
        }
        if (this.charttype === 'bar-y') {
          this.options.xAxis.type = 'value'
          this.options.yAxis.type = 'category'
          this.options.yAxis.data = this.chartlabel
        }
      } else {
        this.options = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          series: [
            {
              name: this.controldata.title,
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },

              data: this.piedata
            }
          ]
        }
        if (this.charttype === 'pie') {
          this.options.series[0].radius = '50%'
        }
      }
    },
    initdata(val) {
      this.chartlabel = []
      this.chartdata = []
      this.piedata = []
      const filedname =
        this.isdetail === true
          ? this.controldata.dataIndex
          : this.controldata.options.filed
      if (
        this.controldata.type === 'radio' ||
        this.controldata.type === 'checkbox' ||
        this.controldata.type === 'select'
      ) {
        this.controldata.options.options.forEach(ee => {
          this.chartlabel.push(ee.label)
          this.chartdata.push(this.fromdata[filedname + ee.label])
          const itemdata = { value: 0, name: '' }
          itemdata.name = ee.label
          itemdata.value = this.fromdata[filedname + ee.label]
          this.piedata.push(itemdata)
        })
      } else if (
        this.controldata.type === 'slider' ||
        this.controldata.type === 'rate' ||
        this.controldata.type === 'inputnumber'
      ) {
        this.chartlabel.push('总和')
        this.chartlabel.push('均值')
        this.chartlabel.push('最大值')
        this.chartlabel.push('最小值')
        this.chartdata.push(this.fromdata[filedname + 'sum'])
        this.chartdata.push(this.fromdata[filedname + 'svg'])
        this.chartdata.push(this.fromdata[filedname + 'max'])
        this.chartdata.push(this.fromdata[filedname + 'min'])
        const itemdata = { value: 0, name: '' }
        itemdata.name = '总和'
        itemdata.value = this.fromdata[filedname + 'sum']
        this.piedata.push(itemdata)
        const itemdatasvg = { value: 0, name: '' }
        itemdatasvg.name = '均值'
        itemdatasvg.value = this.fromdata[filedname + 'svg']
        this.piedata.push(itemdatasvg)
        const itemdatamax = { value: 0, name: '' }
        itemdatamax.name = '最大值'
        itemdatamax.value = this.fromdata[filedname + 'max']
        this.piedata.push(itemdatamax)
        const itemdatamin = { value: 0, name: '' }
        itemdatamin.name = '最小值'
        itemdatamin.value = this.fromdata[filedname + 'min']
        this.piedata.push(itemdatamin)
      } else if (this.controldata.type === 'switch') {
        this.chartlabel.push('是')
        this.chartlabel.push('否')
        this.chartdata.push(this.fromdata[filedname + 'yes'])
        this.chartdata.push(this.fromdata[filedname + 'no'])
        const itemdata = { value: 0, name: '' }
        itemdata.name = '是'
        itemdata.value = this.fromdata[filedname + 'yes']
        this.piedata.push(itemdata)
        const itemdata2 = { value: 0, name: '' }
        itemdata2.name = '否'
        itemdata2.value = this.fromdata[filedname + 'no']
        this.piedata.push(itemdata2)
      }
      val = val === undefined ? 'bar' : val
      switch (val) {
        case 'line':
          this.initseries('line')
          break
        case 'bar':
          this.initseries('bar')
          break
        case 'bar-y':
          this.initseries('bar')
          break
        case 'pie':
          this.initseries('pie')
          break
        case 'ring':
          this.initseries('pie')
          break
        default:
          break
      }
      this.$refs.chart_line_one.setOption()
    }
  },
  watch: {
    charttype(val) {
      this.initdata(val)
    },
    fromdata(val) {
      console.log(val)
      this.initdata(this.charttype)
    },
    controldata() {
      this.initdata(this.charttype)
    }
  },
  components: {
    userechart
  }
}
</script>
